<!--
 @description：
 @author: Xg
 @date: 2021/7/15 20:23
-->
<template>
  <div>
    <el-dialog
      :title="storeName + ' - ' + title"
      :visible="historyOrderVisible"
      width="60%"
      @close="closeDialog(false)"
    >
      <!-- 历史点餐详情列表 -->
      <el-table
        v-loading="loading"
        empty-text="暂无数据"
        border
        element-loading-text="拼命加载中"
        style="width: 100%;"
        :data="historyData"
      >
        <el-table-column
          align="center"
          prop="foodName"
          label="菜品名称"
        />
        <el-table-column
          align="center"
          prop="number"
          label="数量"
        >
          <template slot-scope="scope">
            <el-input-number v-if="isExpire == 0" v-model="scope.row.number" :min="min" size="mini" @change="numberChange(scope.row)" />
            <span v-if="isExpire == 1">{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          prop="remark"-->
        <!--          label="备注"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            &lt;!&ndash;            <span v-if="scope.row.showLabel" id="label-change" @click="switchInput(scope.row)">{{ scope.row.remark }}</span>&ndash;&gt;-->
        <!--            <el-input v-if="isExpire == 0" v-model="scope.row.remark" />-->
        <!--            <span v-if="isExpire == 1">{{ scope.row.remark }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          align="center"
          prop="singlePrice"
          label="菜品单价"
        >
          <template slot-scope="scope">
            <span style="font-size: 15px;color: red">{{ scope.row.singlePrice.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="price"
          label="价格(元)"
        >
          <template slot-scope="scope">
            <span style="font-size: 15px;color: red">{{ scope.row.price.toFixed(2) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        总计:<span style="color: red;font-size: 18px;font-weight: bold">{{ totalPrice.toFixed(2) }}</span> 元
        &nbsp;&nbsp;&nbsp;
        <el-button v-if="isExpire == 0" type="primary" @click="saveHistoryChange()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getHistoryInfo, saveHistoryChange } from '@/api/meal/order'

export default {
  name: 'HistoryOrderDialog',
  props: {
    historyOrderVisible: {
      type: Boolean,
      default: false
    },
    taskId: {
      type: String,
      default: null
    },
    storeName: {
      type: String,
      default: null
    },
    isExpire: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      title: '历史点餐详情',
      historyData: [],
      loading: false,
      // 查询参数
      historyQueryData: {
        taskId: null
      },
      totalPrice: 0,
      min: 1
    }
  },
  created() {
    this.getHistoryInfo()
  },
  methods: {
    // 保存更改
    saveHistoryChange() {
      saveHistoryChange(this.historyData).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功!')
          this.closeDialog(true)
        }
      })
    },
    // 获取历史点餐详情
    getHistoryInfo() {
      this.historyQueryData.taskId = this.taskId
      getHistoryInfo(this.historyQueryData).then(res => {
        if (res.code === 200) {
          this.historyData = res.data
          this.totalPriceChange()
        }
      })
    },
    // 点击切换输入框（修改）
    // switchInput(row) {
    //   row.showLabel = false
    //   // this.$nextTick(() => {
    //   //   this.$refs.remarkInput.focus()
    //   // })
    // },
    // 失去焦点切换span标签（展示）
    // switchSpan(row) {
    //   row.showLabel = true
    // },
    // 关闭子页面
    closeDialog(isRefresh) {
      this.$emit('close', isRefresh)
    },
    // 数量改变(传一整行，利用该行的单价和数量做前端变化)
    numberChange(row) {
      // 价格变化，总计变化
      row.price = row.number * row.singlePrice
      this.totalPriceChange()
    },
    // 重新计算总价格
    totalPriceChange() {
      this.totalPrice = 0
      const that = this
      this.historyData.forEach(function(list) {
        that.totalPrice += list.price
      })
    }
  }
}
</script>

<style scoped>

</style>
